<template>
    <div>
        <dv-full-screen-container class="screen-container">
            <dv-loading v-if="loading">Loading...</dv-loading>
            <div v-else class="host-body d-flex">
                <div class="head">
                    <div class="headL">
                        <p class="headTi">日期范围</p>
                        <el-date-picker
                            v-model="paramsData.fromDate"
                            popper-class="popperClass1"
                            type="date"
                            format="yyyy.MM.dd"
                            value-format="yyyy-MM-dd"
                            placeholder="开始日期"
                            @change="changeDate"
                            :picker-options="pickerOptionsStart"
                            :clearable="true"
                        >
                        </el-date-picker>
                        <p class="roe">-</p>
                        <el-date-picker
                            v-model="paramsData.toDate"
                            popper-class="popperClass1"
                            type="date"
                            format="yyyy.MM.dd"
                            value-format="yyyy-MM-dd"
                            placeholder="结束时间"
                            @change="changeDate"
                            :picker-options="pickerOptionsEnd"
                            :clearable="true"
                            style="margin-left: 5px"
                        >
                        </el-date-picker>
                    </div>
                    <p class="title">资产租赁-资产分析</p>
                    <div class="headR">
                        <p class="headTi" v-if="serchData.length">所属范围</p>
                        <div class="serchCont">
                            <div
                                v-for="(item, index) in serchData"
                                :key="index"
                                class="serchCont-p"
                            >
                                {{ item.value }}
                                <img
                                    src="@/assets/home/minclose.png"
                                    class="minclose"
                                    alt=""
                                    @click="deleteSerch(item, index)"
                                />
                            </div>
                        </div>
                    </div>
                    <div
                        class="openIcon"
                        style="right: -133px; top: 19px"
                        @click="openInfo('项目详情', true)"
                    >
                        <img src="@/assets/home/start.png" alt="" />
                    </div>
                </div>
                <!-- <div class="homeTitle">
                    <h1 class="tit" @click="clll">产权交易所大屏</h1>
                    <p
                        class="sml"
                        data-aos="fade-up"
                        data-aos-delay="300"
                        v-if="bandala"
                    >
                        <span class="bibi">愿景：</span
                        >产权交易所大屏产权交易所大屏产权交易所大屏产权交易所大屏
                    </p>
                </div> -->
                <!-- 左 -->
                <homeLeft
                    class="homeLeft"
                    ref="homeLeft"
                    :paramsData="paramsData"
                    @allChangeData="allChangeData"
                    @openInfo="openInfo"
                ></homeLeft>
                <!-- 中 -->
                <homeCenter
                    class="homeCenter"
                    ref="homeCenter"
                    :paramsData="paramsData"
                    @allChangeData="allChangeData"
                    @openInfo="openInfo"
                    @clearDate="clearDate"
                ></homeCenter>
                <!-- 右 -->
                <homeRight
                    class="homeRight"
                    ref="homeRight"
                    :paramsData="paramsData"
                    @allChangeData="allChangeData"
                    @openInfo="openInfo"
                ></homeRight>
                <!-- 弹窗 -->
                <homeDialog
                    class="homeDialog"
                    ref="homeDialog"
                    :paramsData="paramsData"
                    :homeDiName="homeDiName"
                    :isSroll="isSroll"
                    :serchData="serchData"
                    v-if="homeDiFlog"
                    @closeInfo="closeInfo"
                ></homeDialog>
            </div>
        </dv-full-screen-container>
    </div>
</template>

<script>
import homeCenter from './components/homeCenter.vue'
import homeLeft from './components/homeLeft.vue'
import homeRight from './components/homeRight.vue'
import homeDialog from './components/homeDialog.vue'
export default {
    props: {},
    data() {
        return {
            timer: null,
            loading: true,
            paramsData: {
                city: '',
                area: '',
                operator: '',
                fromDate: '2023-01-01',
                toDate: '2023-12-31',
                year: '',
                month: '',
                customer: '',
                listedAmount: '',
                transactionAmount: '',
                fee: '',
                bid: '',
                bidTop: '',
                day: '',
                returningCustomer: '',
                page: '',
                pageSize: ''
            },
            bandala: true,
            homeDiFlog: false,
            homeDiName: '',
            isSroll: false,
            serchData: [],
            pickerOptionsStart: {
                disabledDate: (time) => {
                    let endDateVal = this.paramsData.toDate
                    if (endDateVal) {
                        return time.getTime() > new Date(endDateVal).getTime()
                    } else {
                        return time.getTime() > Date.now() - 8.64e6
                    }
                }
            },
            pickerOptionsEnd: {
                disabledDate: (time) => {
                    let beginDateVal = this.paramsData.fromDate
                    if (beginDateVal) {
                        return (
                            time.getTime() <
                            new Date(beginDateVal).getTime() -
                                1 * 24 * 60 * 60 * 1000
                        ) //可以选择同一天
                    } else {
                        return time.getTime() > Date.now() - 8.64e6
                    }
                }
            }
        }
    },
    computed: {},
    created() {},
    mounted() {
        this.cancelLoading()
    },
    watch: {
        'paramsData.fromDate'() {
            if (this.paramsData.fromDate == null) {
                this.paramsData.toDate = null
            }
        }
    },
    methods: {
        clll() {
            this.bandala = !this.bandala
        },

        init(data) {
            //300000
            this.timer = setInterval(() => {
                this.allmapData(data)
            }, 300000)
        },
        cancelLoading() {
            setTimeout(() => {
                this.loading = false
            }, 2000)
        },
        // 切换数据
        allChangeData(data) {
            this.serchData = []
            for (let key in data) {
                if (
                    data[key] != '' &&
                    key != 'page' &&
                    key != 'pageSize' &&
                    key != 'fromDate' &&
                    key != 'toDate'
                ) {
                    this.serchData.push({
                        key: key,
                        value: data[key]
                    })
                }
            }
            this.$nextTick(() => {
                this.$refs.homeRight.rightChartgetall(data)
                this.$refs.homeLeft.leftChartgetall(data)
                this.$refs.homeCenter.centerChartgetall(data)
            })
        },
        // 打开详情
        openInfo(name, isSroll) {
            this.homeDiName = name
            this.isSroll = isSroll
            this.homeDiFlog = true
        },
        // 关闭详情
        closeInfo() {
            this.paramsData.page = 1
            this.homeDiFlog = false
        },
        // 筛选日期
        changeDate(val) {
            if (this.paramsData.fromDate && this.paramsData.toDate) {
                this.$refs.homeRight.rightChartgetall(this.paramsData)
                this.$refs.homeLeft.leftChartgetall(this.paramsData)
                this.$refs.homeCenter.centerChartgetall(this.paramsData)
            } else if (this.paramsData.fromDate == null) {
                this.paramsData.fromDate = ''
                this.paramsData.toDate = ''
                this.$refs.homeRight.rightChartgetall(this.paramsData)
                this.$refs.homeLeft.leftChartgetall(this.paramsData)
                this.$refs.homeCenter.centerChartgetall(this.paramsData)
            }
        },
        //清空日期
        clearDate() {
            this.valueData = []
        },
        deleteSerch(item, index) {
            this.serchData.splice(index, 1)
            this.paramsData[item.key] = ''
            if (item.key == 'city') {
                this.$refs.homeCenter.renderMap('浙江省')
            }
            this.$refs.homeRight.rightChartgetall(this.paramsData)
            this.$refs.homeLeft.leftChartgetall(this.paramsData)
            this.$refs.homeCenter.centerChartgetall(this.paramsData)
        }
    },
    beforeDestroy() {
        clearInterval(this.timer)
        this.timer = null
    },
    components: {
        homeCenter,
        homeLeft,
        homeRight,
        homeDialog
    }
}
</script>

<style  scoped lang="scss">
.screen-container {
    font-family: 'pingfang';
    background-color: #000000;
    width: 100%;
    // height: 100vh;
    // 660
    height: 1053px !important;
    background-image: url('../../assets/home/boxbg.png');
    background-size: 100% 100%;
    background-position: center center;
    .host-body {
        width: 100%;
        height: 100%;
        padding: 75px 45px 49px;
        box-sizing: border-box;
        position: relative;
        display: flex;
        justify-content: space-between;
        .head {
            width: 1571px;
            height: 136px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            margin: auto;
            background-image: url('../../assets/home/head.png');
            // background-size: cover;
            background-size: 100% 100%;
            background-position: center center;
            .title {
                font-size: 29px;
                text-align: center;
                font-weight: bold;
                color: #ffffff;
                line-height: 76px;
            }
        }
        .homeLeft {
            width: 477px;
            margin-top: 29px;
        }
        .homeCenter {
            width: 813px;
        }
        .homeRight {
            width: 477px;
            margin-top: 29px;
        }
        .homeTitle {
            width: 100%;
            position: absolute;
            text-align: center;
            left: 0;
            top: 20px;
            .tit {
                width: 100%;
                font-size: 34px;
                background-image: -webkit-linear-gradient(
                    bottom,
                    #ffffff 0%,
                    #95c6fb 100%
                );
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                font-weight: 600;
                font-family: 'fangzheng';
                text-align: center;
                letter-spacing: 2px;
            }
            .sml {
                margin-top: 3px;
                width: 100%;
                font-size: 16px;
                line-height: 20px;
                text-align: center;
                font-weight: 500;
                background-image: -webkit-linear-gradient(
                    bottom,
                    #ffffff 0%,
                    #95c6fb 100%
                );
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                font-weight: 500;
                font-family: 'fangzheng';
                .bibi {
                    background-image: -webkit-linear-gradient(
                        bottom,
                        #95c6fb 0%,
                        #8be7ff 100%
                    );
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    font-weight: 500;
                    font-family: 'fangzheng';
                }
            }
        }
    }
    .head {
        position: relative;
        .headTi {
            width: 55px;
            font-family: 'pingfang';
            font-weight: bold;
            font-size: 12px;
            color: #01d5fc;
            line-height: 38px;
            margin-right: 5px;
        }
        .headL {
            position: absolute;
            display: flex;
            align-items: flex-start;
            top: 13px;
            left: 172px;
            height: 60px;
            .roe {
                color: #ffffff;
                font-size: 18px;
                line-height: 35px;
            }
        }

        .headR {
            position: absolute;
            display: flex;
            align-items: flex-start;
            top: 13px;
            left: 1185px;
            height: 60px;
        }
    }
    .serchCont {
        color: #ffffff;
        font-weight: 400;
        font-size: 12px;
        font-family: 'pingfang';
        display: flex;
        flex-wrap: wrap;
        width: calc(100% - 50px);
        padding-top: 5px;
        &-p {
            margin-left: 4px;
            margin-bottom: 4px;
            padding: 0 12px 0 12px;
            height: 25px;
            background-image: url('../../assets/home/minBgbox.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            display: flex;
            align-items: center;
        }
        .minclose {
            width: 25px;
            height: 25px;
            cursor: pointer;
        }
    }
}
</style>
<style lang="scss">
.popperClass1 {
    width: 320px;
    // 下拉框背景色
    border: none !important;
    background-color: #00122a !important;
    box-shadow: rgb(29, 72, 196) 0px 0px 25px 3px inset !important;
}
.el-picker-panel__body-wrapper,
.el-picker-panel__body {
    border: none !important;

    background-color: transparent !important;
}
.el-date-picker__header-label {
    color: #c5c8d0 !important;
}
.el-date-picker table {
    //字体
    font-size: 16px !important;
}
.el-input__inner,
.el-picker-panel__footer,
.el-button,
.el-button.is-plain:hover {
    // 确定按钮色
    background-color: #00122a !important;
}
.el-time-spinner__item:hover:not(.disabled):not(.active) {
    //二级下拉框
    background: rgba(80, 136, 151, 0.1) !important;
    font-size: 14px !important;
}
.el-date-table td.in-range div,
.el-date-table td.in-range div:hover,
.el-date-table.is-week-mode .el-date-table__row.current div,
.el-date-table.is-week-mode .el-date-table__row:hover div {
    background-color: #05407d !important;
}
.el-picker-panel__icon-btn {
    color: #c5c8d0 !important;
}
.el-picker-panel {
    color: #dbdce0 !important;
}
.el-date-table td.next-month,
.el-date-table td.prev-month {
    color: #bcc0c6 !important;
}

.el-date-table th {
    border-bottom: none !important;
}
.el-date-table td.disabled div {
    background-color: #656b74 !important;
    color: #b3b8c1 !important;
}
.head {
    .el-date-editor.el-input {
        background: transparent !important;
        color: #ffffff !important;
        font-family: 'pingfang' !important;
        font-weight: 400 !important;
        width: 120px !important;
    }
    .el-input__inner {
        border: none !important;
        background: transparent !important;
        color: #ffffff !important;
        font-family: 'pingfang' !important;
        font-weight: 400 !important;
        padding: 0 15px !important;
    }
    .el-date-editor .el-input__prefix .el-input__icon {
        display: none !important;
    }
}
</style>
